import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetWebFonts({
      fonts: {
        sans: "DM Sans",
        serif: "DM Serif Display",
        mono: "DM Mono",
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  shortcuts: [
    // 布局类
    ["flex-center", "flex items-center justify-center"],
    ["flex-between", "flex items-center justify-between"],
    ["flex-col-center", "flex-center flex-col"],

    // 尺寸类
    ["full", "w-full h-full"],
    ["full-screen", "w-screen h-screen"],
    ["square-full", "w-full h-full"],

    // 定位类
    [
      "absolute-center",
      "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
    ],
    [
      "fixed-center",
      "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
    ],

    // 背景类
    ["bg-base", "bg-white dark:bg-dark-500"],
    ["bg-overlay", "bg-[#000000]/60"],
    ["bg-card", "bg-white/80 backdrop-blur-sm"],

    // 文本类
    ["text-base", "text-gray-900 dark:text-gray-300"],
    ["text-secondary", "text-gray-500 dark:text-gray-400"],
    [
      "gradient-text",
      "bg-gradient-to-r from-green-500 to-blue-500 bg-clip-text text-transparent",
    ],

    // 边框和阴影类
    ["border-base", "border-gray-200 dark:border-gray-800"],
    ["card-shadow", "shadow-lg shadow-gray-200/50 dark:shadow-gray-800/50"],

    // 交互类
    ["hover-scale", "transition-transform hover:scale-105"],
    ["hover-opacity", "transition-opacity hover:opacity-80"],

    // 按钮类
    ["btn-base", "px-4 py-2 rounded-lg transition-colors duration-300"],
    ["btn-primary", "btn-base bg-primary text-white hover:bg-primary/80"],
    [
      "btn-ghost",
      "btn-base border border-base hover:bg-gray-100 dark:hover:bg-gray-800",
    ],
  ],
  theme: {
    colors: {
      primary: "var(--primary-color)",
    },
    breakpoints: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
  },
  rules: [
    [
      "card",
      {
        "border-radius": "0.5rem",
        background: "rgba(255, 255, 255, 0.8)",
        "backdrop-filter": "blur(8px)",
        "box-shadow":
          "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
      },
    ],
  ],
  safelist: [
    // 预生成这些类，避免动态类名被 purge
    "bg-primary",
    "text-primary",
    "border-primary",
    ...["green", "blue", "red", "yellow", "purple"]
      .map((color) => [
        `bg-${color}-500`,
        `text-${color}-500`,
        `border-${color}-500`,
        `hover:bg-${color}-600`,
        `from-${color}-400`,
        `to-${color}-600`,
      ])
      .flat(),
  ],
});
